<template>
    <div class="sdy-list">
      <sdyHeader title="啥都有-商品列表" back></sdyHeader>
          <van-card
            v-for="item in goodsList"
            num="10"
            :price="item.originprice"
            :desc="item.desc"
            :title="item.proname"
            :thumb="item.img1">
            <template #footer>
              <van-button size="mini" type="warning" @click="goToDetail(item.proid)">查看详情</van-button>
              <van-button size="mini" type="danger" @click="addCart(item.proid)">加入购物车</van-button>
            </template>
          </van-card>
    </div>
</template>

<script setup lang="ts">

//只要 来个这个页面， 就相当于 进入了一次 搜索
// 就需要拿到带过来的信息 ， 存储在 localStroage 内

import {useRoute , type RouteLocationNormalizedLoaded } from 'vue-router'
import {useRouter , type Router } from 'vue-router'
import {onMounted , ref } from 'vue'
import { Toast } from 'vant';
import type { MyhotItem } from '@/config/interface';
import { searchApi } from '@/api/goodslist';
import {addCartApi} from '@/api/cart'
const $route:RouteLocationNormalizedLoaded =useRoute()
const $router: Router =useRouter()
// 准备一个 函数 ，拿到搜索带过来的信息 存储在 localStroage 内
const setlocalStorage = (text: string ): void=>{
  const historyList:string[] = JSON.parse(window.localStorage.getItem('history') as string) || []

  //把 text 追加到数组内， 然后重新 存储在 localStorage 内
  //如果历史记录 存在这个信息了， 就不需要插入了
  const res:boolean = historyList.indexOf(text) !== -1  //表示信息有

  // console.log(res)  // false  表示有这个信息

  //res  ===true 说明没有， 需要存储
  // if(res) {
    //存储的逻辑
  //}

//代码来到这里， 是什么都不做的操作
if(res) return

//代码来到这里， 说明历史记录没有记录过信息
historyList.push(text)

//再次 把最新的 数组存储到 localStorage 内
window.localStorage.setItem('history', JSON.stringify(historyList))

}


// 1. 根据关键字请求当前页面的数据
// 需要用到携带过来的关键字
// 准备一个数据, 表示当前第几页
const count = ref<number>(1)
// 准备一个数据, 表示页面渲染数组
const goodsList = ref<MyhotItem[]>([])
const getGoodsList = async (text: string) => {
  // 根据 text 关键字请求列表渲染
  const res = await searchApi(text, count.value)
  goodsList.value = res.data
  console.log(res.data)
}


//跳转到 详情页
const goToDetail = (id: string) =>{
  console.log(`查看 id 为${id} 的商品详情`)

  //跳转路由
$router.push({path:'/detail',query:{proid: id}})
}


//加入 购物车
const addCart = async(id: string) =>{
  // console.log(`将 id 为 ${id} 的商品 加入购物车`)

  //根据 id 请求接口数据 ， 加入购物车
  //获取一次用户id 和 token (为了验证 有没有)
  const user_id = window.localStorage.getItem('user_id')
  const token = window.localStorage.getItem('token')

  // 做一次非空验证
  if(!user_id || !token) {
    //你还没有登录,需要登录
    Toast({
      message: '你还没有登录'
    })
    return
  }

  //代码执行到这里， 表示有 user_id 和 token 
  //但是不一定对， 只能请求看看
  const res= await addCartApi(user_id , id )
  console.log(res)
      Toast.success('加入购物车');
  
}



onMounted(() =>{
  // console.log($route)  //拿到他的代理信息
  // setlocalStorage('aa')
  const searchText = $route.query.search
  searchText  &&  setlocalStorage(searchText as string )   //也有可能是 undefined
  searchText  &&  getGoodsList(searchText as string )   //也有可能是 undefined

})

</script>

<style scoped lang="scss">


</style>